<template>
  <popover trigger="hover" :enable="showTooltip">
    <span>
      <span v-if="showAppName" class="rundeck-version-info">
        {{ appName }}
      </span>
      <span v-if="showVersion" class="rundeck-version-info">
        {{ versionSemantic }}
      </span>

      <version-date-display
        v-if="isGa && showDate"
        :title="date"
        :date="date || ''"
      />

      <span v-if="!isGa && (showDate || showRelativeDate || showTag)">
        <span v-if="showTag">
          <span v-if="versionTag === 'SNAPSHOT'">🛠</span>
          <span v-else class="rundeck-version-tag" :style="versionColorStyle">{{
            versionTag
          }}</span>
        </span>
        <span v-if="showRelativeDate" class="rundeck-version-relative-date">{{
          formatFromNow(date)
        }}</span>
        <version-date-display
          v-if="showDate"
          :title="date"
          :date="date || ''"
        />
      </span>

      <version-icon-name-display
        v-if="showName"
        :icon="versionIcon"
        :text="versionText"
        :color="versionColor"
      />
    </span>
    <template #popover>
      {{ version }}
      <version-date-display :date="date || ''" />
      <version-icon-name-display
        :icon="versionIcon"
        :text="versionText"
        :color="versionColor"
      />
    </template>
  </popover>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { RundeckVersion } from "../../utilities/RundeckVersion";
import VersionIconNameDisplay from "./VersionIconNameDisplay.vue";
import VersionDateDisplay from "./VersionDateDisplay.vue";
import { formatFromNow } from "../../utilities/DateTimeFormatters";

export default defineComponent({
  components: {
    VersionIconNameDisplay,
    VersionDateDisplay,
  },
  props: {
    version: {
      type: String,
      required: true,
    },
    date: {
      type: String,
      required: false,
    },
    appName: {
      type: String,
      required: false,
    },
    showAppName: {
      type: Boolean,
      required: false,
      default: true,
    },
    showName: {
      type: Boolean,
      required: false,
      default: true,
    },
    showVersion: {
      type: Boolean,
      required: false,
      default: true,
    },
    showDate: {
      type: Boolean,
      required: false,
      default: true,
    },
    showRelativeDate: {
      type: Boolean,
      required: false,
      default: false,
    },
    showTag: {
      type: Boolean,
      required: false,
      default: true,
    },
    showTooltip: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      rdversion: null as RundeckVersion | null,
    };
  },
  computed: {
    versionTag(): string {
      return this.rdversion !== null ? this.rdversion.data().tag : "";
    },
    isGa(): boolean {
      return !(this.versionTag && this.versionTag !== "GA");
    },
    versionSemantic(): string {
      return this.rdversion !== null ? this.rdversion.versionSemantic() : "";
    },
    versionName(): string {
      return this.rdversion !== null ? this.rdversion.versionName() : "";
    },
    versionIcon(): string {
      return this.rdversion !== null ? this.rdversion.versionIcon() : "";
    },
    versionIconCss(): string {
      return this.rdversion !== null
        ? "glyphicon-" + this.rdversion.versionIcon()
        : "";
    },
    versionColor(): string {
      return this.rdversion !== null ? this.rdversion.versionColor() : "";
    },
    versionColorStyle(): any {
      return {
        color: this.versionColor,
      };
    },
    versionText(): string {
      return [this.versionName, this.versionColor, this.versionIcon]
        .join(" ")
        .toLowerCase();
    },
    displayTitle(): string {
      return `${this.appName} ${this.version} (${this.versionText}) ${this.date}`;
    },
    badgeStyle(): any {
      const rdversion = this.rdversion;
      const color = this.versionColor;
      return rdversion !== null
        ? {
            background: rdversion.stripeBg(color, 15, "#5c5c5c", 20),
            color: "white",
          }
        : {};
    },
  },
  watch: {
    version() {
      this.loadversion();
    },
  },
  mounted() {
    this.loadversion();
  },
  methods: {
    loadversion() {
      this.rdversion = new RundeckVersion({
        versionString: this.version,
        versionDate: this.date,
        appId: this.appName,
      });
    },
    formatFromNow(date) {
      return formatFromNow(date);
    },
  },
});
</script>
<style>
.rundeck-version-info {
  color: #8a8a8a;
}

.rundeck-version-date {
  color: lightgray;
  font-style: italic;
}

.rundeck-version-tag {
  text-transform: uppercase;
}

.rundeck-version-relative-date {
  text-decoration: underline;
}
</style>
